<script setup>

import {onMounted, ref} from "vue";
import Http from "@/http/http.js";
import {getImgUrl} from "@/until/tool.js";

const typeName = ref(null)
const typeId = ref(0)
const typeData = ref([])
const listData = ref([])
onMounted(() => {
  getServiceData()
})
const getServiceData = async () => {
  typeData.value = []
  const res = await Http.serviceType()
  res['Data'].map(value => {
    if (value.ParentId === 1) {
      if (typeData.value.length === 5) {
        return
      }
      typeData.value.push(value)
    }
  })
  if (typeId.value === 0) {
    typeName.value = typeData.value[0].TypeName;
    typeId.value = typeData.value[0].TypeId;
  }
  await getListData()
}

const getListData = async () => {
  const rbs = await Http.serviceList({TypeId: typeId.value})
  listData.value = []
  rbs['Data'].forEach((d, index) => {
    if (index < 6) {
      listData.value.push({
        ServiceId: d.ServiceId,
        ServiceImg: d.ServiceImg,
        ServiceTitle: d.ServiceTitle,
        ServiceDes: d.ServiceDes
      })
    }
  })
}

const setTypeName = (data) => {
  typeName.value = data.TypeName;
  typeId.value = data.TypeId;
  getListData()
}


</script>

<template>
  <div class="one_bg">
    <h2 class="title text-align-center">—— 服务项目 ——</h2>
    <div class="serviceBox wid">
      <div class="  tab text-20px wow animate__fadeInUp animate__animated" data-wow-delay="0s" data-wow-duration="1s"
           style="margin-bottom: 25px; visibility: visible; animation-duration: 1s; animation-delay: 0s;">
        <ul>

          <li v-for="item of typeData" @click="setTypeName(item)" :class="typeName===item.TypeName?'cur':''">
            <div class="txt">{{ item.TypeName }}
              <div class="arrow"></div>
            </div>
            <div class="line"></div>
            <div class="dot"></div>
          </li>
        </ul>
      </div>

      <div class="conDZ wow animate__fadeInUp animate__animated" data-wow-delay="0s" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-delay: 0s;">
        <div class="conD" style="display: block;">
          <div class="list">
            <ul>


              <li v-for="item of listData">
                <div class="pic"><img :src="getImgUrl(item.ServiceImg)" :alt="item.ServiceTitle">
                  <div class="txtp">
                    <div class="name font18">{{ item.ServiceTitle }}</div>
                    <div class="txt font14">
                      <div class="intro">{{ item.ServiceDes }}...</div>
                      <a :href="'/serviceDetail/'+item.ServiceId">更多&gt;&gt;</a></div>
                  </div>
                </div>
              </li>


            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.one_bg {
  padding:    4.7em 0 3.5em;
  height:     603px;
  background: url("../../assets/service_bg.jpg") no-repeat;
  }

.serviceBox .con { overflow: visible;}

.serviceBox .tab ul { margin-top: 2em; font-weight: bold;
  display:                        flex; justify-content: center; align-items: center;}

.serviceBox .tab ul li { padding: 0 1.7em 2.6em; position: relative; z-index: 0; color: #1f2c5c;}

.serviceBox .tab ul li .txt { cursor: pointer; line-height: 2.7; width: 8.3em; background-color: #fff; text-align: center;
  -moz-box-shadow:                    0 0 0.6em rgba(0, 0, 0, .1);
  -webkit-box-shadow:                 0 0 0.6em rgba(0, 0, 0, .1);
  box-shadow:                         0 0 0.6em rgba(0, 0, 0, .1);
  position:                           relative; z-index: 0;
  }

.serviceBox .tab ul li .arrow {position: absolute;
  bottom:                                -0.2em; margin-left: -0.5em; width: 0.7em; height: 0.7em;
  background-color:                      #fff; left: 50%;
  transform:                             rotate(45deg);
  -ms-transform:                         rotate(45deg); /* IE 9 */
  -webkit-transform:                     rotate(45deg); /* Safari and Chrome */
  -moz-box-shadow:                       0.6em 0.6em 0.6em rgba(0, 0, 0, .1);
  -webkit-box-shadow:                    0.6em 0.6em 0.6em rgba(0, 0, 0, .1);
  box-shadow:                            0.6em 0.6em 0.6em rgba(0, 0, 0, .1); }

.serviceBox .tab ul li .dot { position: absolute;bottom: 0;
  left:                                 50%; margin-left: -0.58em; background-color: #ccc;
  width:                                0.76em; height: 0.76em;
  border:                               2px solid #fff;
  -moz-border-radius:                   50%; -webkit-border-radius: 50%; border-radius: 50%;}

.serviceBox .tab ul li .line { position: absolute; height: 1px; bottom: 10px;
  width:                                 100%; left: 0; background-color: #ccc;}

.serviceBox .tab ul li:nth-child(1) .line {width: 50%; left: auto; right: 0;}

.serviceBox .tab ul li:last-child .line {width: 50%;}

.serviceBox .tab ul li.cur .txt { background-color: #1f2c5c; color: #fff;}

.serviceBox .tab ul li.cur .arrow { background-color: #1f2c5c;}

.serviceBox .tab ul li.cur .dot {background-color: #1f2c5c;}

.serviceBox .conDZ {}

.serviceBox .conD {display: none;}

.serviceBox .conD:first-child {display: block;}

.serviceBox .list { margin-top: -3%; }

.serviceBox .list ul { display: flex;
  flex-wrap:                    wrap; justify-content: flex-start; align-items: flex-start;}

.serviceBox .list li { width: 31%; margin-top: 3.5%; margin-right: 3.5%;
  }

.serviceBox .list li:nth-child(3n) { margin-right: 0;}

.serviceBox .list .pic {display: block; cursor: pointer; position: relative; z-index: 0;padding-top: 40%; overflow: hidden;}

.serviceBox .list .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit:                          cover;
  transition:                          all 0.5s;
  -webkit-transition:                  all 0.5s;}

.serviceBox .list .txtp { position: absolute; left: 0; top: 0;
  right:                            0; height: 100%;background: rgba(0, 0, 0, 0.4);
  display:                          flex; justify-content: center; align-items: center;
  text-align:                       center;
  }

.serviceBox .list .txtp .name { margin: 0 8.7% 0.3em; color: #fff; font-family: "思源宋体 CN"; font-weight: bold;
  }

.serviceBox .list .txtp .txt { display: none;
  position:                             absolute; bottom: 0; left: 0; width: 83%;
  background-color:                     #fff;
  -moz-box-shadow:                      0 0 1em rgba(0, 0, 0, .1);
  -webkit-box-shadow:                   0 0 1em rgba(0, 0, 0, .1);
  box-shadow:                           0 0 1em rgba(0, 0, 0, .1);
  height:                               3.4em; line-height: 3.4em; overflow: hidden;
  }

.serviceBox .list li:hover .txtp .txt { display: flex;
  justify-content:                               flex-start; align-items: center;}

.serviceBox .list .txtp .txt .intro { color: #202c5c; text-align: left;
  height:                                    3.4em;line-height: 3.4em; overflow: hidden; margin: 0 1em 0; flex: 1; }

.serviceBox .list .txtp .txt a { width: 5em; display: block;
  height:                               3.4em; line-height: 3.4em; text-align: center; color: #fff;
  background-color:                     #202c5c;}


</style>
